<style lang='scss' scoped>
  $hf: 12vw;
  $add: 6.5vw;
  .add {
    width: $add;
    height: $add;
    right: 3vw;
  }
  .list-box {
    & > .list {
      border-bottom: 1px solid #aaa;
    }
    .list {
      height: $hf;
      padding: 0 2vw;
    }
  }
  
</style>
<!--  -->
<template lang='pug'>
  .container
    head-text(name="广场" :number="wholeNumber")
      img.top-center.add(src="@/assets/image/add.png" @click="addShow")
    .list-box
      .list.f-sb_c(@click="getIntoRoom(item.name)" v-for="(item, index) in rooms" :key="index")
        .title {{item.name}}
        span {{item.users}}人
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import headText from '@/components/head-text'
  import inputAlert from '@/components/input-alert'
  export default {
    name: 'roomList',
    //import引入的组件需要注入到对象中才能使用
    components: {
      headText,
      inputAlert
    },
    data() {
    //这里存放数据
      return {
        badd: false
      };
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['rooms']),
      ...mapGetters([]),
      wholeNumber(){
        return this.rooms.reduce( (val, obj) => val + obj.users, 0)
      }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapMutations(['setRoomName']),
      addShow(){

      },
      getIntoRoom(name){
         this.setRoomName(name)
         this.$router.push({name: 'roomInner'})
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>